<script setup>
import { UserFilled, SwitchButton } from '@element-plus/icons-vue'
import { useUserStoreWithOut } from '@/stores/modules/user'
const userStore = useUserStoreWithOut()
import router from '@/router'
import { ref, onMounted } from 'vue'

const loginOut = () => {
  userStore.logoutConfirm()
}

const login = () => {
  router.push('/login')
}

const userName = ref('')

onMounted(() => {
  userName.value = userStore.getUserName
})
</script>
<template>
  <div class="left-box">
    <ul class="flex">
      <li class="li_css flex align_center" @click="login">
        <el-icon class="m-r-5"><UserFilled /></el-icon>{{ userName }}
      </li>
      <li class="li_css flex align_center" @click="loginOut">
        <el-icon class="m-r-5"><SwitchButton /></el-icon>注销
      </li>
    </ul>
  </div>
</template>
<style scoped>
.li_css {
  margin-right: 20px;
  cursor: pointer;
}
</style>